import React, {Component} from 'react';
import Keyboard from "./keyboard";
import Setting from "./setting";
import style from './music.module.css';

//请求数据
import axios from 'axios';

class Music extends Component {
  /* vue 在created 方法*/

  /*react componentDidMount*/

  state = {
    musicList: [],
    item: {}
  };

  clickBoard(item) {
    //item要传递到 右侧组件
    this.setState({
      item
    })
  }

  componentDidMount() {
    axios.get('/music').then(res => {//异步任务
      // setState 环境是同步的还是异步
      this.setState({
        musicList: res.data
      });
    });
  }


  render() {
    return (
      <div>
        <div className={style.left}>
          <Keyboard {...this.state} clickBoard={this.clickBoard.bind(this)}/>
        </div>
        <div className={style.right}>
          <Setting item={this.state.item}/>
        </div>
      </div>
    );
  }
}

export default Music;
